<% var keyPrefix = angularAppName + '.'+ entityTranslationKey + '.'; %>
<form name="editForm" role="form" novalidate ng-submit="vm.save()"<% if (validation) { %> show-validation<% } %>>

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="my<%= entityClass %>Label" translate="<%= keyPrefix %>home.createOrEditLabel">Create or edit a <%= entityClassHumanized %></h4>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group">
            <label for="id" translate="global.field.id">ID</label>
            <input type="text" class="form-control" id="id" name="id"
                    ng-model="vm.<%=entityInstance %>.id" readonly />
        </div>
        <%_ for (idx in fields) {
            var fieldName = fields[idx].fieldName;
            var fieldNameCapitalized = fields[idx].fieldNameCapitalized;
            var fieldNameHumanized = fields[idx].fieldNameHumanized;
            var fieldType = fields[idx].fieldType;
            var fieldTypeBlobContent = fields[idx].fieldTypeBlobContent;
            var fieldInputType = 'text';
            var ngModelOption = '';
            var translationKey = keyPrefix + fieldName;
            if (fieldType == 'Integer' || fieldType == 'Long' || fieldType == 'Float' || fieldType == 'Double' || fieldType == 'BigDecimal') {
                fieldInputType = 'number';
            } else if (fieldType == 'LocalDate' || fieldType == 'Date') {
                fieldInputType = 'date';
            } else if (fieldType == 'ZonedDateTime') {
                fieldInputType = 'datetime-local';
            } else if (fieldType == 'Boolean') {
                fieldInputType = 'checkbox';
            } else if (fieldType == 'byte[]' && fieldTypeBlobContent != 'text') {
                fieldInputType = 'hidden';
            } _%>
        <div class="form-group"<% if (fieldType == 'byte[]' && fieldTypeBlobContent != 'text') { %> ngf-drop ngf-change="vm.set<%=fieldNameCapitalized %>($file, vm.<%= entityInstance %>)"<% if (fieldTypeBlobContent == 'image') { %> ngf-pattern="'image/*'"<% } %><% } %>>
            <label class="control-label" translate="<%= translationKey %>" for="field_<%= fieldName %>"><%= fieldNameHumanized %></label>
            <%_ if (fields[idx].fieldIsEnum) { _%>
            <select class="form-control" name="<%= fieldName %>" ng-model="vm.<%= entityInstance %>.<%= fieldName %>" id="field_<%= fieldName %>"<% if (fields[idx].fieldValidate == true && fields[idx].fieldValidateRules.indexOf('required') != -1) { %> required<% } %>>
                <%_ var enumPrefix = angularAppName + '.'+ fieldType;
                    var values = fields[idx].fieldValues.replace(/\s/g, '').split(',');
                    for (key in values) {
                        var value = values[key]; _%>
                <option value="<%= value %>" translate="<%=enumPrefix%>.<%=value%>"><%= value %></option>
                <%_ } _%>
            </select>
            <%_ } else { _%>
                <%_ if (fieldType == 'byte[]' && fieldTypeBlobContent != 'text') { _%>
            <div>
                    <%_ if (fieldTypeBlobContent == 'image') { _%>
                <img data-ng-src="{{'data:' + vm.<%=entityInstance %>.<%=fieldName%>ContentType + ';base64,' + vm.<%=entityInstance %>.<%=fieldName%>}}" style="max-height: 100px;" ng-if="vm.<%= entityInstance %>.<%= fieldName %>"/>
                    <%_ } _%>
                <div class="help-block clearfix">
                    <%_ if (fieldTypeBlobContent == 'any') { _%>
                    <a class="pull-left" ng-click="vm.openFile(vm.<%= entityInstance %>.<%= fieldName %>ContentType, vm.<%= entityInstance %>.<%= fieldName %>)" ng-if="vm.<%= entityInstance %>.<%= fieldName %>" target="_blank">open</a><br>
                    <span class="pull-left">{{vm.<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(vm.<%= entityInstance %>.<%= fieldName %>)}}</span>
                    <%_ } else { _%>
                    <span class="pull-left">{{vm.<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(vm.<%= entityInstance %>.<%= fieldName %>)}}</span>
                    <%_ } _%>
                    <button ng-click="vm.<%= entityInstance %>.<%= fieldName %>=null;vm.<%= entityInstance %>.<%= fieldName %>ContentType=null;"
                            ng-if="vm.<%= entityInstance %>.<%= fieldName %>"
                            class="btn btn-default btn-xs pull-right">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
                <button type="file" ngf-select class="btn btn-default btn-block"
                        ngf-change="vm.set<%=fieldNameCapitalized %>($file, vm.<%= entityInstance %>)"<% if (fieldTypeBlobContent == 'image') { %> accept="image/*" translate="entity.action.addimage"<% } else { %> translate="entity.action.addblob"<% } %>>
                    <% if (fieldTypeBlobContent == 'image') { %>Add image<% } else { %>Add blob<% } %>
                </button>
            </div>
                <%_ } _%>
                <%_ if (fieldType == 'LocalDate' || fieldType == 'Date') { _%>
                <div class="input-group">
                    <input id="field_<%= fieldName %>" type="text" class="form-control" name="<%= fieldName %>" uib-datepicker-popup="{{dateformat}}" ng-model="vm.<%= entityInstance %>.<%= fieldName %>" is-open="vm.datePickerOpenStatus.<%=fieldName %>"
                    <%- include ng_validators %>/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('<%=fieldName %>')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
                <%_ } else if(fieldType == 'ZonedDateTime') { _%>
                <div class="input-group">
                    <input id="field_<%= fieldName %>" type="text" class="form-control" name="<%= fieldName %>" datetime-picker="{{dateformat}}" ng-model="vm.<%= entityInstance %>.<%= fieldName %>" is-open="vm.datePickerOpenStatus.<%=fieldName %>"
                    <%- include ng_validators %>  />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('<%=fieldName %>')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
                <%_ } else if(fieldTypeBlobContent == 'text') { _%>
                <textarea class="form-control" name="<%= fieldName %>" id="field_<%= fieldName %>"
                    ng-model="vm.<%= entityInstance %>.<%= fieldName %>" <%- include ng_validators %> />
                <%_ } else { _%>
            <input type="<%= fieldInputType %>" class="form-control" name="<%= fieldName %>" id="field_<%= fieldName %>"
                    ng-model="vm.<%= entityInstance %>.<%= fieldName %>"
                    <%- include ng_validators %> />
                    <%_ if (fieldType == 'byte[]' && fieldTypeBlobContent != 'text') { _%>
            <input type="hidden" class="form-control" name="<%= fieldName %>ContentType" id="field_<%= fieldName %>ContentType"
                    ng-model="vm.<%= entityInstance %>.<%= fieldName %>ContentType" />
                    <%_ } _%>
                <%_ } _%>
            <%_ } _%>
            <%_ if (fields[idx].fieldValidate == true) { _%>
            <div ng-show="editForm.<%= fieldName %>.$invalid">
                <%_ if (fields[idx].fieldValidateRules.indexOf('required') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.required" translate="entity.validation.required">
                    This field is required.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('minlength') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.minlength" translate="entity.validation.minlength" translate-value-min="<%= fields[idx].fieldValidateRulesMinlength %>">
                    This field is required to be at least <%= fields[idx].fieldValidateRulesMinlength %> characters.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('maxlength') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.maxlength" translate="entity.validation.maxlength" translate-value-max="<%= fields[idx].fieldValidateRulesMaxlength %>">
                    This field cannot be longer than <%= fields[idx].fieldValidateRulesMaxlength %> characters.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('min') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.min" translate="entity.validation.min" translate-value-min="<%= fields[idx].fieldValidateRulesMin %>">
                    This field should be more than <%= fields[idx].fieldValidateRulesMin %>.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('max') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.max" translate="entity.validation.max" translate-value-max="<%= fields[idx].fieldValidateRulesMax %>">
                    This field cannot be more than <%= fields[idx].fieldValidateRulesMax %>.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('minbytes') != -1) { _%>
                <p class="help-block"
                   ng-show="editForm.<%= fieldName %>.$error.minbytes" translate="entity.validation.minbytes" translate-value-min="<%= fields[idx].fieldValidateRulesMinbytes %>">
                    This field should be more than <%= fields[idx].fieldValidateRulesMinbytes %>.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('maxbytes') != -1) { _%>
                <p class="help-block"
                   ng-show="editForm.<%= fieldName %>.$error.maxbytes" translate="entity.validation.maxbytes" translate-value-max="<%= fields[idx].fieldValidateRulesMaxbytes %>">
                    This field cannot be more than <%= fields[idx].fieldValidateRulesMaxbytes %>.
                </p>
                <%_ } _%>
                <%_ if (fields[idx].fieldValidateRules.indexOf('pattern') != -1) { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.pattern" translate="entity.validation.pattern" translate-value-pattern="<%= fields[idx].fieldValidateRulesPattern %>">
                    This field should follow pattern "<%= fields[idx].fieldValidateRulesPattern %>".
                </p>
                <%_ } _%>
                <%_ if (fieldType == 'Integer' || fieldType == 'Long' || fieldType == 'Float' || fieldType == 'Double' || fieldType == 'BigDecimal') { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.number" translate="entity.validation.number">
                    This field should be a number.
                </p>
                <%_ } _%>
                <%_ if (fieldType == 'ZonedDateTime' || fieldType == 'Date') { _%>
                <p class="help-block"
                    ng-show="editForm.<%= fieldName %>.$error.ZonedDateTimelocal" translate="entity.validation.ZonedDateTimelocal">
                    This field should be a date and time.
                </p>
                <%_ } _%>
            </div>
            <%_ } _%>
        </div>
        <%_ } _%>

        <%_ for (idx in relationships) {
            var relationshipType = relationships[idx].relationshipType;
            var ownerSide = relationships[idx].ownerSide;
            var otherEntityName = relationships[idx].otherEntityName;
            var otherEntityNamePlural = relationships[idx].otherEntityNamePlural;
            var relationshipName = relationships[idx].relationshipName;
            var relationshipNameHumanized = relationships[idx].relationshipNameHumanized;
            var relationshipFieldName = relationships[idx].relationshipFieldName;
            var relationshipFieldNamePlural = relationships[idx].relationshipFieldNamePlural;
            var otherEntityField = relationships[idx].otherEntityField;
            var otherEntityFieldCapitalized = relationships[idx].otherEntityFieldCapitalized;
            var translationKey = keyPrefix + relationshipName; _%>
            <%_ if (relationshipType == 'many-to-one' || (relationshipType == 'one-to-one' && ownerSide == true && otherEntityName == 'user')) { _%>
        <div class="form-group">
            <label translate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
                <%_ if (dto == 'no') { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" ng-model="vm.<%= entityInstance %>.<%=relationshipFieldName %>" ng-options="<%=otherEntityName %> as <%=otherEntityName %>.<%=otherEntityField %> for <%=otherEntityName %> in vm.<%=otherEntityNamePlural.toLowerCase() %> track by <%=otherEntityName %>.id">
                <option value=""></option>
            </select>
                <%_ } else { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" ng-model="vm.<%= entityInstance %>.<%=relationshipFieldName %>Id" ng-options="<%=otherEntityName %>.id as <%=otherEntityName %>.<%=otherEntityField %> for <%=otherEntityName %> in vm.<%=otherEntityNamePlural.toLowerCase() %>">
                <option value=""></option>
            </select>
                <%_ } _%>
        </div>
            <%_ } else if (relationshipType == 'one-to-one' && ownerSide == true) { _%>
        <div class="form-group">
            <label translate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
                <%_ if (dto == 'no') { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" ng-model="vm.<%= entityInstance %>.<%=relationshipFieldName %>" ng-options="<%=otherEntityName %> as <%=otherEntityName %>.<%=otherEntityField %> for <%=otherEntityName %> in vm.<%=relationshipFieldNamePlural.toLowerCase() %> | orderBy:'id' track by <%=otherEntityName %>.id">
                <option value=""></option>
            </select>
                <%_ } else { _%>
            <select class="form-control" id="field_<%= relationshipName %>" name="<%= relationshipName %>" ng-model="vm.<%= entityInstance %>.<%=relationshipFieldName %>Id" ng-options="<%=otherEntityName %>.id as <%=otherEntityName %>.<%=otherEntityField %> for <%=otherEntityName %> in vm.<%=relationshipFieldNamePlural.toLowerCase() %> | orderBy:'id'">
                <option value=""></option>
            </select>
                <%_ } _%>
        </div>
            <%_ } else if (relationshipType == 'many-to-many' && relationships[idx].ownerSide == true) { _%>
        <div class="form-group">
            <label translate="<%= translationKey %>" for="field_<%= relationshipName %>"><%= relationshipNameHumanized %></label>
            <select class="form-control" id="field_<%= relationshipName %>" multiple name="<%= relationshipName %>" ng-model="vm.<%=entityInstance %>.<%=relationshipFieldNamePlural %>" ng-options="<%=otherEntityName %> as <%=otherEntityName %>.<%=otherEntityField %> for <%=otherEntityName %> in vm.<%=otherEntityNamePlural.toLowerCase() %> track by <%=otherEntityName %>.id"></select>
        </div>
            <%_ } _%>
        <%_ } _%>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
        </button>
        <button type="submit" ng-disabled="editForm.$invalid || isSaving" class="btn btn-primary">
            <span class="glyphicon glyphicon-save"></span>&nbsp;<span translate="entity.action.save">Save</span>
        </button>
    </div>
</form>
